<?php

$html = new HtmlHelper($this);
echo $html->script('jquery');
echo $html->script('jquery.maskedinput-1.3.min');

echo $html->stylesheet('datepicker/jquery-ui-1.8.13.custom');
echo $html->script('datepicker/jquery-ui-1.8.13.custom.min'); 

?>
<script type='text/javascript'>

var chart;
var example = 'pie-basic', theme = 'default';

Highcharts.theme = { colors: ['#4572A7'] }; // Prevent errors in default theme

var highchartsOptions = Highcharts.getOptions(); 

var atualizarDadosStatus = function(tr, sTempo, sData)
{
    var sImage = '<?php echo $html->image('icons/tick.png'); ?>';
    <?php if($sUser == 'USER'){ ?>
        tr.find('td').eq(6).html(sTempo);
        tr.find('td').eq(5).html(sData);
        tr.find('td').eq(4).html(sImage);	
    <?php } else{ ?>
        tr.find('td').eq(7).html(sTempo);
        tr.find('td').eq(6).html(sData);
        tr.find('td').eq(5).html(sImage);
    <?php }?>
};

var filtroRedirecionar = function(sParam, sFiltro)
{
    var url = String(window.location);

    url = url.split('/index/');

    window.location.href = url[0]+'/index/'+sParam+':'+sFiltro;
};

var encaminharLead = function(piLeadId, piUsuaId)
{
    jQuery.ajax({
        url: '<?php echo Mapper::url('/lead/encaminharLead'); ?>',
        type: 'POST',
        data:{'lead_id':piLeadId, 'usua_id':piUsuaId}
    });
};
$(function(){
     
        $( "#data1" ).datepicker();
        $( "#data1" ).mask("99/99/9999");
        $( "#data2" ).datepicker();
        $( "#data2" ).mask("99/99/9999");
          //traduzindo para português
        $.datepicker.setDefaults({
            dateFormat:'dd/mm/yy',
            dayNames:['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
            dayNamesMin:['D','S','T','Q','Q','S','S','D'],
            dayNamesShort:['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort:['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
            nextText:'Próximo',prevText:'Anterior'});
});

jQuery(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'grafico',
            animation: true,
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            height: 309,
            width: 402
        },
        credits : {
            enabled: false
        },
        title: {
            text: null
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: Highcharts.theme.textColor || '#000000',
                    connectorColor: Highcharts.theme.textColor || '#000000',
                    formatter: function() {
                        return '<b>'+ this.y +'%</b>';
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                    <?php echo $sSliceChart; ?>
            ]
        }]
    });

    // Filtro por status
    jQuery('#filtro-status').change(function(e) {
        filtroRedirecionar('status', jQuery(this).val());
    });

    // Filtro de X em X
    jQuery('#filtro-exibicao').change(function(e) {
        filtroRedirecionar('exibir', jQuery(this).val());
    });

    jQuery('.relogio-aberto').click(function(e) {
        e.preventDefault();

        var relogio = jQuery(this);

        jQuery.ajax({
            'url': '<?php echo Mapper::url('/lead/processar'); ?>/'+jQuery(this).attr('lead_id'),
            success: function(r)
            {
                eval(' var objResp = '+r);
                var tr = relogio.parents('tr');

                // Atualizar dados
                atualizarDadosStatus(tr, objResp.tempo_resposta, objResp.data_atendimento);
                tr.find('td').eq(8).find('[name=select-status] option[value=4]').attr('selected','selected');
            }
        });
    });

    jQuery('[name=select-status]').change(function() {

        var select = jQuery(this);

        jQuery.ajax({
            'url': '<?php echo Mapper::url('/lead/alterarStatus'); ?>/lead_id:'+jQuery(this).attr('lead_id')+'/status_id:'+jQuery(this).val(),
            success: function(r)
            {
                if( r != '' )
                {
                    eval('var objResp = '+r);
                    var tr = select.parents('tr');

                    // Atualizar dados
                    atualizarDadosStatus(tr, objResp.tempo_resposta, objResp.data_atendimento);				
                }
            }
        });
    });

    jQuery('.enviar-ap').click(function(e) {
        var botaoap = jQuery(this);

        jQuery.ajax({
            'url': '<?php echo Mapper::url('/lead/enviarAP'); ?>/lead_id:'+botaoap.attr('lead_id')+'/camp_id:'+botaoap.attr('camp_id'),
            success: function(r)
            {
                    alert(r);
            }
        });
    });

    jQuery('#btn-novo-lead').click(function(e) {
        window.location.href = '<?php echo Mapper::url('/lead/adicionar'); ?>';
    });

    jQuery('.encaminhar-lead').change(function(e) {
        encaminharLead(jQuery(this).attr('lead_id'), jQuery(this).val());
    });

    jQuery('#mais-acoes').change(function(e) {
        var iUsuaId = jQuery(this).val();

        if( jQuery(this).val() == 'sep' )
        {
            jQuery("#mais-acoes option:first").attr('selected','selected');
        }
        else
        {
            jQuery("[name^=mais_acoes]").each(function(i) {
                var objCheck = jQuery(this);

                if( jQuery(this).is(':checked') )
                {
                    encaminharLead(objCheck.attr('lead_id'), iUsuaId);
                    var tr = objCheck.parents('tr');
                    tr.find('td').eq(9).find('.encaminhar-lead option[value='+iUsuaId+']').attr('selected','selected');
                }
            });
        }
        jQuery("#mais-acoes option:first").attr('selected','selected');
    });

    jQuery("#selec-mais-acoes").click(function(e) {
        var objSMA = jQuery(this);

        jQuery('[name^=mais_acoes]').each(function(i) {
            jQuery(this).attr('checked', objSMA.is(':checked'));
        });
    });

    jQuery('#box-email').click(function(e) {

        var btn = jQuery(this);

        jQuery.ajax({
            url: '<?php echo Mapper::url('/lead/enviarRelatorio'); ?>',
            type: 'POST',
            success: function(r) {
                jQuery('.modal').remove();
                jQuery('body').append(r);
            }
        });
    });

    // TODO: CRIAR FUNCAO QUE INFORMA A NOTICIA E FECHA A JANELA

    jQuery('#box-exportacao').click(function(e) {
        var btn = jQuery(this);
        jQuery.ajax({
            url: '<?php echo Mapper::url('/lead/exportar'); ?>',
            type: 'POST',
            success: function(r) {
                jQuery('.modal').remove();
                jQuery('body').append(r);
            }
        });
    });

    jQuery("#nodata").click(function(e) {
        jQuery('#data1').val('');
        jQuery('#data2').val('');
    });

});

function closeModal() { 
    jQuery('.modal').remove();
}
</script>

<div class="wrapper">
    <div class="mainTitle envelope tMargin-2 left">
        <h2 class="bMargin-1">Dashboard - Leads</h2>
        <h3>Leads controlados em tempo real</h3>
    </div>
    <div class="filter right tMargin-6">
        <form action="#" method="post">
            <input type="button" id="nodata" value="Limpar datas">
            <input name="data1" id="data1" size="11" maxlength="10" value="<?php echo $_SESSION['data1'] ?>"> 
            <input name="data2" id="data2" size="11" maxlength="10" value="<?php echo $_SESSION['data2'] ?>"> 					
            <input type="button" name="filtrar" value="Filtrar">
            <select name="" id="filtro_campanha" class="campanha">
                <option value='0'>Escolha o formulário</option>
                <?php
                    foreach($arrCampanhasAtivas as $objCampanha)
                    {
                        $objCampanha = (object) $objCampanha;

                        echo '<option value="'.$objCampanha->camp_id.'" ';
                        if(isset($_SESSION['filtro_campanha']))
                            echo (($objCampanha->camp_id == $_SESSION['filtro_campanha']) ? 'selected="selected"' : '');
                        echo '>'.$objCampanha->camp_nome.'</option>';
                    }
                    foreach($arrCampanhasInativas as $objCampanha)
                    {
                        $objCampanha = (object) $objCampanha;

                        echo '<option value="'.$objCampanha->camp_id.'" class = "inativo" ';
                        if(isset($_SESSION['filtro_campanha']))
                            echo (($objCampanha->camp_id == $_SESSION['filtro_campanha']) ? 'selected="selected"' : '');
                        echo '>'.$objCampanha->camp_nome.'</option>';
                    }
                ?>
            </select>
            <select name="" id="filtro_estado" class="estado">
                <option value='0'>Escolha o Estado</option>
                <option value="AC" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "AC")) echo "selected='selected'"; ?>>Acre</option>
                <option value="AL" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "AL")) echo "selected='selected'"; ?>>Alagoas</option>
                <option value="AP" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "AP")) echo "selected='selected'"; ?>>Amapá</option>
                <option value="AM" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "AM")) echo "selected='selected'"; ?>>Amazonas</option>
                <option value="BA" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "BA")) echo "selected='selected'"; ?>>Bahia</option>
                <option value="CE" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "CE")) echo "selected='selected'"; ?>>Ceará</option>
                <option value="DF" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "DF")) echo "selected='selected'"; ?>>Distrito Federal</option>
                <option value="ES" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "ES")) echo "selected='selected'"; ?>>Espírito Santo</option>
                <option value="GO" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "GO")) echo "selected='selected'"; ?>>Goiás</option>
                <option value="MA" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "MA")) echo "selected='selected'"; ?>>Maranhão</option>
                <option value="MT" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "MT")) echo "selected='selected'"; ?>>Mato Grosso</option>
                <option value="MS" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "MS")) echo "selected='selected'"; ?>>Mato Grosso do Sul</option>
                <option value="MG" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "MG")) echo "selected='selected'"; ?>>Minas Gerais</option>
                <option value="PA" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "PA")) echo "selected='selected'"; ?>>Pará</option>
                <option value="PB" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "PB")) echo "selected='selected'"; ?>>Paraíba</option>
                <option value="PR" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "PR")) echo "selected='selected'"; ?>>Paraná</option>
                <option value="PE" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "PE")) echo "selected='selected'"; ?>>Pernambuco</option>
                <option value="PI" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "PI")) echo "selected='selected'"; ?>>Piauí</option>
                <option value="RJ" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "RJ")) echo "selected='selected'"; ?>>Rio de Janeiro</option>
                <option value="RN" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "RN")) echo "selected='selected'"; ?>>Rio Grande do Norte</option>
                <option value="RS" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "RS")) echo "selected='selected'"; ?>>Rio Grande do Sul</option>
                <option value="RO" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "RO")) echo "selected='selected'"; ?>>Rondônia</option>
                <option value="RR" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "RR")) echo "selected='selected'"; ?>>Roraima</option>
                <option value="SC" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "SC")) echo "selected='selected'"; ?>>Santa Catarina</option>
                <option value="SP" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "SP")) echo "selected='selected'"; ?>>São Paulo</option>
                <option value="SE" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "SE")) echo "selected='selected'"; ?>>Sergipe</option>
                <option value="TO" <?php if(isset($_SESSION['filtro_estado']) && ($_SESSION['filtro_estado'] == "TO")) echo "selected='selected'"; ?>>Tocantins</option>
            </select>
        </form>
    </div><!-- .filter -->
	
    <div class="clear"></div>
	
    <hr />
	
    <?php if( $_SESSION['usua_perm'] == 1): ?>
    <div class="left">
        <div class="boxSelect left">
                <input type="checkbox" id="selec-mais-acoes" />
        </div>
        <div class="boxSelect left">
            <select id="mais-acoes">
                <option value="">Encaminhamento em massa</option>
                <option value="sep">------------------------</option>
                <?php 
                    foreach( $arrUsuario as $objUsuario )
                    {
                        $objUsuario = (object) $objUsuario;

                        echo '<option value="'.$objUsuario->usua_id.'" ';
                        if(isset($objLead->usua_id))
                            (( $objUsuario->usua_id == $objLead->usua_id )? 'selected="selected"' : '' );
                        echo '  >'.$objUsuario->usua_nome.'</option>'; 
                    }
                ?>
            </select>
        </div>
    </div>
    <?php endif; ?>
	
    <div class="filter2 right bMargin-3">
        <form action="#" method="post">
            <span class="rMargin-2">Personalizar exibição</span>
            <select id="filtro-status" class="rMargin-2">
                <option value="0">Status do lead</option>
                <?php
                    foreach($arrStatus as $sChave => $sValor)
                    {
                        echo "<option value='".$sChave."'  ";
                        if(isset($_SESSION['filtro_status']))
                            echo (($_SESSION['filtro_status']==$sChave) ? 'selected="selected"' : '');
                        echo "  >".$sValor."</option>";
                    }
                ?>
            </select>
            <?php 
            /*
             * @TODO: Implementar esse filtro
             *
            <select class="rMargin-2">
                    <option>Usuário</option>
            </select>
            <select id="filtro-exibicao" class="rMargin-2">
                <option value="25" <?php echo ( $_SESSION['paginate_exibir'] == 25 ) ? 'selected="selected"' : ''; ?> >Exibir de 25 em 25</option>
                <option value="50" <?php echo ( $_SESSION['paginate_exibir'] == 50 ) ? 'selected="selected"' : ''; ?> >Exibir de 50 em 50</option>
                <option value="75" <?php echo ( $_SESSION['paginate_exibir'] == 75 ) ? 'selected="selected"' : ''; ?> >Exibir de 75 em 75</option>
                <option value="100" <?php echo ( $_SESSION['paginate_exibir'] == 100 ) ? 'selected="selected"' : ''; ?> >Exibir de 100 em 100</option>
                <option value="150" <?php echo ( $_SESSION['paginate_exibir'] == 150 ) ? 'selected="selected"' : ''; ?> >Exibir de 150 em 150</option>
            </select>
            */
            ?>
            <?php /* <input type="submit" value="Filtrar" /> */ ?>
        </form>
    </div><!-- .filter -->

    <div class="clear"></div>

    <div class="leadsCtn">
        <div class="title">
            <h4 class="left">Leads</h4>
            <?php 
            if( $bAddLead ) 
            {
                echo '<div class="right" style="vertical-align: middle; margin-right: 10px; margin-top: 10px">';
                echo $html->link('Criar novo lead', '/lead/adicionar', array( 'class' => 'botaoCinza right peq' )); 
                echo "</div>";
            }
            ?>
        </div>

        <table class="bMargin-7 listLeads zebra" cellspacing="0">
            <colgroup>
                <col width="10px" />
                <col width="120px" />
                <col width="165px" />
                <col width="120px" />
            </colgroup>
            <thead>
                <tr>
                    <?php if( $_SESSION['usua_perm'] == 1): ?>
                    <th></th>
                    <?php endif; ?>
                    <th>Data/Hora Entrada do lead</th>
                    <th>Nome</th>
                    <th>Telefone</th>
                    <th>Enviar AP</th>
                    <th>Contato</th>
                    <th>Data/Hora</th>
                    <th>Tempo de resposta</th>
                    <th>Status</th>
                    <?php if( $_SESSION['usua_perm'] == 1): ?>
                    <th>Encaminhar</th>
                    <?php endif; ?>
                </tr>
            </thead>
            <tbody>
                <?php
             
                foreach($arrLead as $objLead)
                {
                    $objLead = (object) $objLead;
                    ?>
                    <tr 
                        <?php
                            foreach($arrCampanhasInativas as $obj)
                            {
                                if($obj['camp_id'] == $objLead->camp_id)
                                {
                                    echo "class = 'inativo'";
                                }
                            }
                        ?>
                        >
                        <?php if( $_SESSION['usua_perm'] == 1){ ?>
                        <td><input type="checkbox" name="mais_acoes[]" lead_id="<?php echo $objLead->lead_id; ?>" /></td>
                        <?php } ?>
                        <td>
                        <?php
                            echo substr($objLead->lead_entrada,8,2).' '.$arrMeses[substr($objLead->lead_entrada,5,2)].'/'.substr($objLead->lead_entrada, 11,5);
                        ?>
                        </td>
                        <td><?php echo ( $objLead->lead_bloqueado ) ? $objLead->lead_nome : $html->link($objLead->lead_nome, '/lead/editar/'.$objLead->lead_id.'/'.$objLead->camp_id); ?></td>
                        <td><?php echo ( $objLead->lead_bloqueado ) ? '--------' : $objLead->lead_telefone; ?></td>
                        <td class="tac">
                        <?php 
                            if( !$objLead->lead_bloqueado ) 
                            {
                                echo '<span class="enviar-ap" lead_id="'.$objLead->lead_id.'" camp_id="'.$objLead->camp_id.'">'.$html->image('icons/paper.png').'</span>';
                            }
                            else
                            {
                                echo '---';
                            } 
                        ?>
                        </td>
                        <td class="tac">
                        <?php
                            if( $objLead->lead_status == 1 )
                            {
                                echo ( $objLead->lead_bloqueado ) ? '---' : '<span class="relogio-aberto" lead_id="'.$objLead->lead_id.'">'.$html->image('icons/clock.png').'</span>';
                            }
                            else
                            {
                                echo $html->image('icons/tick.png');
                            } 
                        ?>
                        </td>
                        <td>
                        <?php
                            if( trim($objLead->lead_atendimento) != '' )
                            {
                                echo substr($objLead->lead_atendimento,8,2).' '.$arrMeses[substr($objLead->lead_atendimento,5,2)].'/'.substr($objLead->lead_atendimento, 11,5);
                            }
                            else
                            {
                                echo '--';
                            }
                        ?>
                        </td>
                        <td><?php echo $objLead->tempo_resposta; ?></td>
                        <td>
                            <select name='select-status' <?php if( $objLead->lead_bloqueado ) echo "disabled='disabled'"?> lead_id='<?php echo $objLead->lead_id; ?>'>
                            <?php
                                foreach( $arrStatus as $iStatusId => $sStatus )
                                {
                                    if( $objLead->lead_status != 1 )
                                    {
                                        if( $iStatusId !=1 )
                                        {
                                            echo "<option value='".$iStatusId."' ".(( $iStatusId == $objLead->lead_status ) ? "selected='selected'" : '').">".$sStatus."</option>";
                                        }
                                    }
                                    else
                                    {
                                        echo "<option value='".$iStatusId."' ".(( $iStatusId == $objLead->lead_status ) ? "selected='selected'" : '').">".$sStatus."</option>";
                                    }
                                }
                            ?>
                            </select>
                        </td>
                        <?php if( $_SESSION['usua_perm'] == 1 ): ?>
                        <td>
                            <select class="encaminhar-lead" lead_id="<?php echo $objLead->lead_id; ?>" >
                            <option value="0">Escolha um usuário</option>
                            <?php 
                            foreach( $arrUsuario as $objUsuario )
                            {
                                $objUsuario = (object) $objUsuario;
                                echo '<option value="'.$objUsuario->usua_id.'" '.(( $objUsuario->usua_id == $objLead->usua_id )? 'selected="selected"' : '' ).'  >'.$objUsuario->usua_nome.'</option>'; 
                            }
                            ?>
                            </select>
                        </td>
                        <?php endif; ?>
                    </tr>
                    <?php
                }
                ?>
            </tbody>
        </table>
    </div><!-- .leads
    <ul class="paginacao right tMargin-3 bMargin-7">
    <?php
        $pagination->model("Lead");
        echo $pagination->previous("<li class='first'>Anterior</li>");
        echo "<li>";
        echo $pagination->numbers();
        echo "</li>";
        
        echo $pagination->next("<li class='last'>Próxima</li>");		
    ?>
    </ul>
    <div class="clear"></div>-->
    <div id="grafico" class="graph left"></div><!-- .pizzaGraph -->
    <div class="indiceDesempenho right">
        <div class="title">Índices de desempenho</div>
        <div class="leftColumn left">
            <p>
                Leads recebidos
                <br />
                <strong><?php echo $iTotalLeads; ?></strong>
            </p>

            <p>
                Leads atendidos
                <br />
                <strong><?php echo $iLeadsAtendidos; ?></strong>
            </p>

            <p>
                Tempo médio
                <br />
                <strong><?php echo $sTempoMedio; ?></strong>
            </p>
        </div>
        <div class="rightColumn right">
            <p>
                Valor do lead
                <br />
                <strong><span>R$</span> <?php echo number_format($iValorLead, 2, ',', '.'); ?></strong>
            </p>
            <p>
                Total de vendas
                <br />
                <strong><span>R$</span> <?php echo number_format($iTotalVendas, 2, ',', '.'); ?></strong>
            </p>
        </div>
    </div>
    <div class="clear"></div>
    <div class="buttonsInfos" style="overflow: hidden;">
        <div class="links right">
            <?php // @TODO: Imprimir para PDF  <a href="#" class="pdf">PDF</a>?>
            <a href="#" onclick="javascript:window.print();" class="print">Imprimir</a>
            <a href="#" id='box-email' class="email">E-mail</a>
            <a href="#" id='box-exportacao' class="folder">Exportar leads</a>
        </div>
    </div>
    <ul class="graphLegend">
        <li><?php echo $html->image('legend-green.gif', array('width'=>'12', 'height'=>'12')); ?> Em aberto</li>
        <li><?php echo $html->image('legend-blue.gif', array('width'=>'12', 'height'=>'12')); ?> Convertido</li>
        <li><?php echo $html->image('legend-orange.gif', array('width'=>'12', 'height'=>'12')); ?> Reunião</li>
        <li><?php echo $html->image('legend-yellow.gif', array('width'=>'12', 'height'=>'12')); ?> Aguardando</li>
        <li><?php echo $html->image('legend-red.gif', array('width'=>'12', 'height'=>'12')); ?> S/Conversão</li>
    </ul>
</div><!-- .wraper -->